<!DOCTYPE html>
<html lang="ch-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6 col-lg-4">
                <h2 class="mt-5 mb-3 text-center">修改密码</h2>
                <a class="btn btn-secondary" href="../index.html">返回</a>
                <form id="changePwdForm">
                    <div class="form-group">
                        <label for="oldPwd">原密码</label>
                        <input type="password" class="form-control" id="oldPwd" name="oldPwd">
                    </div>
                    <div class="form-group">
                        <label for="newPwd">密码</label>
                        <input type="password" class="form-control" id="newPwd" name="newPwd">
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
                    </div>
                    <div class="text-center">
                        <button type="submit" id="submitBtn"
                            class="btn btn-primary mt-3 col-lg-6 col-8 disabled">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/js-cookie/dist/js.cookie.js"></script>

    <script>
        $(document).ready(function () {
            $("#confirmPassword").on('input', function () {
                if ($('#newPwd').val() !== $(this).val() && $('#oldPwd').val()) {
                    $(this).addClass('is-invalid');
                    $("#submitBtn").addClass('disabled');
                } else {
                    $("#submitBtn").removeClass('disabled');
                    $(this).removeClass('is-invalid');
                }
            });

            /* 表单提交 */
            $('#changePwdForm').submit(function (event) {
                /* 阻止默认提交 */
                event.preventDefault();
                /* 获取表单数据， 设置提交内容 */
                var formData = {
                    action: 'change',
                    data: {
                        username: Cookies.get('username'),
                        pic: Cookies.get('pic'),
                        oldPwd: $('#oldPwd').val(),
                        newPwd: $('#newPwd').val()
                    }
                };
                /* 发送Ajax请求 */
                $.ajax({
                    url: '/api/account',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (response) {
                        if (response.errno === 0) {
                            alert('密码修改成功，请重新登录');
                            window.location.href = './login.html';
                        } else if (response.errno === 3) {
                            $('#oldPwd').addClass('is-invalid');
                            alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle login error
                        console.error('Login failed: ' + error);
                    }
                });
            });
        });
    </script>
</body>


</html>